<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 14px;
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        .fl {
            float: left;
        }

        .clearfix {
            overflow: hidden;
        }

        .layout {
            width: 1180px;
            margin: 0 auto;
        }

        .menu {
            height: 45px;
            overflow: hidden;
            padding: 14px 0;
        }

        .menu .box {
            float: left;
            height: 45px;
            border-right: 1px solid #cccccc;
            padding-left: 23px;
            line-height: 18px;
        }

        .menu .box:first-child {
            padding-left: 0;
        }

        .menu .box:last-child {
            border-right: none;
        }

        .menu .box:last-child ul {
            width: auto !important;
        }

        .menu .box:last-child ul li:last-child {
            width: auto;
        }

        .menu .box ul {
            height: 28px;
        }

        .menu .box ul li {
            float: left;
            width: 50px;
        }

        .menu .box ul li:first-child {
            font-weight: bold;
        }

        .menu .box ul li:hover {
            color: red;
        }

        .picture {
            margin-bottom: 10px;
        }

        .main {
            overflow: hidden;
            padding-bottom: 50px;
        }

        .main .item {
            margin-bottom: 30px;
        }

        .carousel {
            width: 500px;
            height: 300px;
            border: 1px solid #ccc;
            position: relative;
            margin-right: 20px;
        }

        .ad {
            width: 500px;
            height: 300px;
            position: relative;
            overflow: hidden;
        }

        .carousel img {
            width: 500px;
            overflow: hidden;
        }

        .ad ul li {
            width: 500px;
            height: 300px;
            overflow: hidden;
            float: left;
        }

        .ad ul {
            position: absolute;
            left: 0;
            top: 0;
            width: 3000px;
        }

        .ad ul li.current {
            background: yellow;
        }

        .ad ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .ad ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .ad ol li.current {
            background: yellow;
        }

        .arr {
            display: none;
        }

        .arr span {
            width: 40px;
            height: 40px;
            line-height: 40px;
            position: absolute;
            /*left: 5px;*/
            top: 50%;
            margin-top: -20px;
            background-color: #000;
            cursor: pointer;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        .arr .left {
            left: 5px;
        }

        .arr .right {
            right: 5px;
            /*left: auto;*/
        }

        .news {
            width: 638px;
            padding-left: 20px;
            height: 300px;
            overflow: hidden;
        }

        .news li {
            list-style-type: circle;
            line-height: 27px;
            height: 27px;
            color: #ccc;
        }

        .news li a {
            display: block;
            width: 100%;
            color: #000;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div class="layout">
        <div class="header">
            <div class="menu">
            </div>
        </div>
        <div class="picture">
            <img src="https://aecpm.alicdn.com/simba/img/TB1W4nPJFXXXXbSXpXXSutbFXXX.jpg" alt="" height="90" width="100%">
        </div>
        <div class="main">
            <div class="clearfix item">
                <div class="fl carousel">
                    <div class="ad">
                        <ul class="imgs">
                            <li>
                                <img src="https://aecpm.alicdn.com/simba/img/TB1W4nPJFXXXXbSXpXXSutbFXXX.jpg" width='500' height='300' alt="" />
                            </li>
                            <li>
                                <img src="http://images.sohu.com/saf/a2018/0328/ChAKr1q66lyAEsLEAABa7E3x91g869320x213.jpg" width='500' height='300' alt=""
                                />
                            </li>
                            <li>
                                <img src="https://aecpm.alicdn.com/simba/img/TB1W4nPJFXXXXbSXpXXSutbFXXX.jpg" width='500' height='300' alt="" />
                            </li>
                            <li>
                                <img src="http://images.sohu.com/saf/a2018/0328/ChAKr1q66lyAEsLEAABa7E3x91g869320x213.jpg" width='500' height='300' alt=""
                                />
                            </li>
                            <li>
                                <img src="https://aecpm.alicdn.com/simba/img/TB1W4nPJFXXXXbSXpXXSutbFXXX.jpg" width='500' height='300' alt="" />
                            </li>
                        </ul>
                        <ol></ol>
                    </div>
                    <div class="arr">
                        <span class="left">&lt;</span>
                        <span class="right">&gt;</span>
                    </div>
                </div>
                <div class="news fl">
                    <ul>

                    </ul>
                </div>
            </div>
            <div class="clearfix item">
                <div class="fl carousel">
                    <div class="ad">
                        <ul class="imgs">
                            <li>
                                <img src="https://aecpm.alicdn.com/simba/img/TB1W4nPJFXXXXbSXpXXSutbFXXX.jpg" width='500' height='300' alt="" />
                            </li>
                            <li>
                                <img src="http://images.sohu.com/saf/a2018/0328/ChAKr1q66lyAEsLEAABa7E3x91g869320x213.jpg" width='500' height='300' alt=""
                                />
                            </li>
                            <li>
                                <img src="https://aecpm.alicdn.com/simba/img/TB1W4nPJFXXXXbSXpXXSutbFXXX.jpg" width='500' height='300' alt="" />
                            </li>
                            <li>
                                <img src="http://images.sohu.com/saf/a2018/0328/ChAKr1q66lyAEsLEAABa7E3x91g869320x213.jpg" width='500' height='300' alt=""
                                />
                            </li>
                            <li>
                                <img src="https://aecpm.alicdn.com/simba/img/TB1W4nPJFXXXXbSXpXXSutbFXXX.jpg" width='500' height='300' alt="" />
                            </li>
                        </ul>
                        <ol></ol>
                    </div>
                    <div class="arr">
                        <span class="left">&lt;</span>
                        <span class="right">&gt;</span>
                    </div>
                </div>
                <div class="news fl">
                    <ul>

                    </ul>
                </div>
            </div>
            <div class="clearfix item">
                <div class="fl carousel">
                    <div class="ad">
                        <ul class="imgs">
                            <li>
                                <img src="https://aecpm.alicdn.com/simba/img/TB1W4nPJFXXXXbSXpXXSutbFXXX.jpg" width='500' height='300' alt="" />
                            </li>
                            <li>
                                <img src="http://images.sohu.com/saf/a2018/0328/ChAKr1q66lyAEsLEAABa7E3x91g869320x213.jpg" width='500' height='300' alt=""
                                />
                            </li>
                            <li>
                                <img src="https://aecpm.alicdn.com/simba/img/TB1W4nPJFXXXXbSXpXXSutbFXXX.jpg" width='500' height='300' alt="" />
                            </li>
                            <li>
                                <img src="http://images.sohu.com/saf/a2018/0328/ChAKr1q66lyAEsLEAABa7E3x91g869320x213.jpg" width='500' height='300' alt=""
                                />
                            </li>
                            <li>
                                <img src="https://aecpm.alicdn.com/simba/img/TB1W4nPJFXXXXbSXpXXSutbFXXX.jpg" width='500' height='300' alt="" />
                            </li>
                        </ul>
                        <ol></ol>
                    </div>
                    <div class="arr">
                        <span class="left">&lt;</span>
                        <span class="right">&gt;</span>
                    </div>
                </div>
                <div class="news fl">
                    <ul>

                    </ul>
                </div>
            </div>
        </div>

    </div>

    <script>
        // 菜单
        var menuList = [
            [
                {
                    title: '菜单1'
                }, {
                    title: '菜单2'
                }, {
                    title: '菜单1'
                }, {
                    title: '菜单2'
                }, {
                    title: '菜单1'
                }, {
                    title: '菜单2'
                }
            ], [
                {
                    title: '菜单1'
                }, {
                    title: '菜单2'
                }, {
                    title: '菜单1'
                }, {
                    title: '菜单2'
                }, {
                    title: '菜单1'
                }, {
                    title: '菜单2'
                }
            ], [
                {
                    title: '菜单1'
                }, {
                    title: '菜单2'
                }, {
                    title: '菜单1'
                }, {
                    title: '菜单2'
                }, {
                    title: '菜单1'
                }, {
                    title: '菜单2'
                }
            ], [
                {
                    title: '菜单1'
                }, {
                    title: '菜单2'
                }, {
                    title: '菜单1'
                }, {
                    title: '菜单2'
                }, {
                    title: '菜单1'
                }, {
                    title: '菜单2'
                }
            ], [
                {
                    title: '菜单1'
                }, {
                    title: '菜单2'
                }, {
                    title: '菜单1'
                }, {
                    title: '菜单2'
                }, {
                    title: '菜单1'
                }, {
                    title: '菜单2'
                }
            ], [
                {
                    title: '菜单1'
                }, {
                    title: '菜单2'
                }, {
                    title: '菜单1'
                }, {
                    title: '菜单2'
                }, {
                    title: '菜单1'
                }, {
                    title: '菜单2'
                }
            ], [
                {
                    title: '菜单1'
                }, {
                    title: '菜单2'
                }, {
                    title: '菜单'
                }, {
                    title: '菜单2'
                }, {
                    title: '菜单1'
                }, {
                    title: '菜单'
                }
            ],

        ]
        var menuDom = document.getElementsByClassName('menu')[0];

        menuList.forEach(function (item) {
            var divDom = document.createElement('div');
            divDom.setAttribute('class', 'box');
            var ulDom = null;
            item.forEach(function (menu, index) {
                if (index == 0 || index == 3) {
                    ulDom = document.createElement('ul');
                }
                var liDom = document.createElement('li');
                liDom.innerText = menu.title;

                ulDom.appendChild(liDom);
                if (index == 2 || index == 5) {
                    divDom.appendChild(ulDom);
                }
            });
            menuDom.appendChild(divDom);
        })


        function animate(obj, target) {
            clearInterval(obj.timeId); //
            // 是将开启的定时器ID存在当前对象的timeId属性当中，每次单击按钮的时候，都要先清掉定时器，保证当前对象移动的时候，只开启一个定时器
            obj.timeId = setInterval(function () {
                // 3. 先获取盒子当前的位置
                var leader = obj.offsetLeft; // 获取盒子距离定位的父盒子之间的距离
                var step = 20; // 向前移动的步长

                step = leader < target ? step : -step;
                if (Math.abs(leader - target) > Math.abs(step)) {
                    leader = leader + step;
                    obj.style.left = leader + 'px';
                } else {
                    clearInterval(obj.timeId);
                    obj.style.left = target + 'px'; // 最后的时候，不足一个步长了，可以直接迈过去，到达目标位置
                }

            }, 12)
        }
        function carouselFunction(node) {
            // 轮播图
            var box = node;
            var ul = box.getElementsByClassName('imgs')[0];
            var lis = ul.children;
            var ad = ul.parentNode;
            var imgWidth = ad.offsetWidth;
            var ol = ad.children[1];
            var arr = box.getElementsByClassName("arr")[0];
            var leftBtn = box.getElementsByClassName("left")[0];
            var rightBtn = box.getElementsByClassName("right")[0];

            // 2 根据li 生成小方块
            for (var i = 0; i < lis.length; i++) {
                var li = document.createElement("li");
                li.innerHTML = i + 1;
                ol.appendChild(li);
            }
            //  3    获取ol 下的所有li 
            var olist = ol.children;
            // 设置第一个li的初始样式
            olist[0].setAttribute("class", "current");
            // 4 给ol 中的li 注册事件
            for (var i = 0; i < olist.length; i++) {
                olist[i].setAttribute("index", i);
                olist[i].onmouseover = function () {
                    for (var i = 0; i < olist.length; i++) {
                        olist[i].removeAttribute("class");
                    }
                    this.setAttribute("class", "current");
                    //  5 图片小方块同步
                    var index = this.getAttribute("index");
                    var target = -imgWidth * index;
                    animate(ul, target);
                    //  三者同步
                    pic = oIndex = index;
                }
            }

            //  5 给box 盒子注册鼠标悬停事件
            box.onmouseover = function () {
                arr.style.display = "block";
                // 清空定时器
                clearInterval(timeId);
            }
            box.onmouseout = function () {
                arr.style.display = "none";
                timeId = setInterval(play, 2000);
            }
            // 7 克隆ul的第一个li 追加到ul的最后面
            ul.appendChild(lis[0].cloneNode(true));
            // 8 控制小方块与图片同步
            var oIndex = 0;
            // 6 给左右按钮注册事件 
            // 定义变量pic 控制移动图片的张数
            var pic = 0;
            rightBtn.onclick = function () {
                play();
            }
            leftBtn.onclick = function () {
                if (pic == 0) {
                    pic = olist.length;
                    ul.style.left = - imgWidth * pic + "px";
                }
                pic--;
                var target = -imgWidth * pic;
                animate(ul, target);
                if (oIndex == 0) {
                    oIndex = olist.length - 1;
                } else {
                    oIndex--;
                }
                for (var i = 0; i < olist.length; i++) {
                    olist[i].removeAttribute("class");
                }
                olist[oIndex].setAttribute("class", "current");
            }

            // 10 自动播放
            var timeId = 0;
            timeId = setInterval(play, 2000);

            // 定义一个向右播放的函数
            function play() {
                if (pic == olist.length) {
                    pic = 0;
                    ul.style.left = "0px";
                }
                pic++;
                var target = -imgWidth * pic;
                animate(ul, target);
                console.log(ul.offsetLeft);
                if (oIndex == olist.length - 1) {
                    oIndex = 0;
                } else {
                    oIndex++;
                }
                for (var i = 0; i < olist.length; i++) {
                    olist[i].removeAttribute("class");
                }
                olist[oIndex].setAttribute("class", "current");
            }
        }

        [...document.getElementsByClassName('carousel')].forEach(function (nodeItem) {
            carouselFunction(nodeItem)
        });


        // 新闻列表
        var newsList = [
            {
                title: '新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1'
            }, {
                title: '新闻2'
            }, {
                title: '新闻1'
            },
            {
                title: '新闻2'
            }, {
                title: '新闻1'
            }, {
                title: '新闻2'
            }, {
                title: '新闻1'
            },
            {
                title: '新闻2'
            }, {
                title: '新闻1'
            }, {
                title: '新闻2'
            }, {
                title: '新闻1'
            },
            {
                title: '新闻2'
            }
        ]
        var newsDomList = document.getElementsByClassName('news');


        function createNews(node, data) {
            var newsDomUl = node.getElementsByTagName('ul')[0];
            data.forEach(function (newsItem) {
                var li = document.createElement('li');
                var a = document.createElement('a');
                a.innerText = newsItem.title;
                li.appendChild(a);
                newsDomUl.appendChild(li);
            })
        }

        [...newsDomList].forEach(function (item) {
            createNews(item, newsList)
        })
    </script>
</body>

</html>